<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品统计</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<!--external css-->
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.css"
	rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="css/owl.carousel.css" type="text/css">
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />

</head>
<body>
	<div class="row">
		<div class="col-lg-12">
			<div class="inbox-head">
			<h3>商品统计</h3>
		</div>
		
			<div class="custom-bar-chart">
				<div class="bar">
					<div class="title">苹果</div>
					<div class="value tooltips" data-original-title="80%"
						data-toggle="tooltip" data-placement="top">80%</div>
				</div>
				<div class="bar doted">
					<div class="title">香蕉</div>
					<div class="value tooltips" data-original-title="50%"
						data-toggle="tooltip" data-placement="top">50%</div>
				</div>
				<div class="bar ">
					<div class="title">橘子</div>
					<div class="value tooltips" data-original-title="40%"
						data-toggle="tooltip" data-placement="top">40%</div>
				</div>
				<div class="bar doted">
					<div class="title">柚子</div>
					<div class="value tooltips" data-original-title="55%"
						data-toggle="tooltip" data-placement="top">55%</div>
				</div>
				<div class="bar">
					<div class="title">火龙果</div>
					<div class="value tooltips" data-original-title="20%"
						data-toggle="tooltip" data-placement="top">20%</div>
				</div>
				<div class="bar doted">
					<div class="title">柑橘</div>
					<div class="value tooltips" data-original-title="39%"
						data-toggle="tooltip" data-placement="top">39%</div>
				</div>
				<div class="bar">
					<div class="title">西红柿</div>
					<div class="value tooltips" data-original-title="75%"
						data-toggle="tooltip" data-placement="top">75%</div>
				</div>
				<div class="bar doted">
					<div class="title">黄瓜</div>
					<div class="value tooltips" data-original-title="45%"
						data-toggle="tooltip" data-placement="top">45%</div>
				</div>
				<div class="bar ">
					<div class="title">青椒</div>
					<div class="value tooltips" data-original-title="50%"
						data-toggle="tooltip" data-placement="top">50%</div>
				</div>
				<div class="bar doted">
					<div class="title">鸭梨</div>
					<div class="value tooltips" data-original-title="42%"
						data-toggle="tooltip" data-placement="top">42%</div>
				</div>
				<div class="bar ">
					<div class="title">菜花</div>
					<div class="value tooltips" data-original-title="60%"
						data-toggle="tooltip" data-placement="top">60%</div>
				</div>
				<div class="bar doted">
					<div class="title">干菜</div>
					<div class="value tooltips" data-original-title="90%"
						data-toggle="tooltip" data-placement="top">90%</div>
				</div>
			</div>

			<!--main content end-->
		
		</div>
	</div>
	<!-- js placed at the end of the document so the pages load faster -->
	<script src="js/jquery.js"></script>
	<script src="js/jquery-1.8.3.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/jquery.scrollTo.min.js"></script>
	<script src="js/jquery.nicescroll.js" type="text/javascript"></script>
	<script src="js/jquery.sparkline.js" type="text/javascript"></script>
	<script src="assets/jquery-easy-pie-chart/jquery.easy-pie-chart.js"></script>
	<script src="js/owl.carousel.js"></script>
	<script src="js/jquery.customSelect.min.js"></script>

	<!--common script for all pages-->
	<script src="js/common-scripts.js"></script>

	<!--script for this page-->
	<script src="js/sparkline-chart.js"></script>
	<script src="js/easy-pie-chart.js"></script>

	<script>
		//owl carousel

		$(document).ready(function() {
			$("#owl-demo").owlCarousel({
				navigation : true,
				slideSpeed : 300,
				paginationSpeed : 400,
				singleItem : true

			});
		});

		//custom select box

		$(function() {
			$('select.styled').customSelect();
		});
	</script>

</body>
</html>